<template>
    <div class="table-container">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>员工管理</el-breadcrumb-item>
                <el-breadcrumb-item>在职继承</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- <div class="table-search">
            <el-row>
                <el-button type="primary" @click="viewCustomer" >查看已分配的客户</el-button>
            </el-row>
        </div> -->
        <div class="selectBox">
            <div class="customer">
                <div class="tit"><h3>需要转接的客户</h3><span>提示：继承修改将于24小时后生效！</span></div>
                <el-button type="success" @click="toSelect">选择客户</el-button>
                <div class="table-content">
                    <el-table
                        border
                        empty-text="当前数据空空如也"
                        ref="multipleTable"
                        :data="offerList"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @select="selectedRow"
                        @select-all="selectedAll"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="userid" label="序号" width="100"></el-table-column>
                        <el-table-column prop="external_data.name" label="客户名" width="100"></el-table-column>
                        <el-table-column prop="follow_data.remark" label="所属员工" width="auto"></el-table-column>
                        <!-- <el-table-column prop="name" label="微信号" width="auto"></el-table-column> -->
                        <el-table-column prop="mobile" label="手机号" width="auto"></el-table-column>
                        <el-table-column prop="create_time" label="添加时间" width="auto" :formatter="changeTime"></el-table-column>
                        <el-table-column label="操作" fixed="right">
                            <template slot-scope="scope">
                                <el-button slot="reference" @click="delCustom(scope.$index, scope.row)" type="danger" size="mini">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="page-nav">
                        <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[10, 20, 30, 50,100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <div class="selectBox">
            <div class="customer">
                <h3>将客户转接给</h3>
                <el-button type="success" @click="openSelectStaff">选择接替成员</el-button>
                <div class="replaceStaff" v-if="Object.keys(selectStaffInfo).length">
                    <div class="item">
                        <img :src="selectStaffInfo.qr_code" alt="">
                        {{selectStaffInfo.name}}
                        <i class="el-icon-error" @click="delStaff"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn">
            <el-button type="primary" @click="toSubmit">确定转接</el-button>
        </div>

        <!-- 选择客户时对话框 -->
        <el-dialog
            title="选择用户"
            :visible.sync="dialogVisible"
            width="25%">
            <div class="dialogBox">
                <div class="item" @click="selectStaff_cus">
                    <div class="iconBox"><i class="el-icon-search"></i></div>
                    <h4>按成员选择</h4>
                    <p>选择有工作变更的成员的客户</p>
                </div>
                <div class="item" @click="select_custom">
                    <div class="iconBox active"><i class="el-icon-s-custom"></i></div>
                    <h4>选择指定客户</h4>
                    <p>直接选择有变更的客户</p>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 按成员选择 -->
        <el-dialog
            title="按成员选择客户"
            :visible.sync="dialogVisible_on"
            width="30%">
            <div class="selectStaffBox">
                <div class="selectList" style="border-right: 1px solid #f1f1f1;">
                    <h4>成员</h4>
                    <div class="selectListBox">
                        <el-radio-group v-model="checkStaff" @change="selectStaffFn">
                            <el-radio :label="item.qy_wechat_id" v-for="(item,index) in selectStaffData" :key="index">{{item.name}}</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="selectList">
                    <h4>客户</h4>
                    <div class="selectListBox">
                        <el-checkbox-group v-model="checkCustomer">
                            <el-checkbox :label="index" v-for="(item,index) in customerList" :key="index">{{item.external_data.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_on = false">取 消</el-button>
                <el-button type="primary" @click="selectStaff_cusOk">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 选择指定客户 -->
        <el-dialog
            title="选择指定客户"
            :visible.sync="dialogVisible_on2"
            width="30%">
            <div class="selectStaffBox">
                <div class="selectList" v-if="customerList.length">
                    <el-radio-group v-model="checkAppoint">
                        <el-radio :label="item" v-for="(item,index) in customerList" :key="index">{{item.external_data.name}}</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_on2 = false">取 消</el-button>
                <el-button type="primary" @click="selectCus_Appoint">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 选择接替员工 -->
        <el-dialog
            title="选择接替的员工"
            :visible.sync="dialogVisible_staff"
            @closed="closedFn_staff"
            width="30%">
            <div class="selectStaffBox">
                <!-- <el-input type="text" v-model="staffInput" @keyup.enter.native="getSelectStaff" :placeholder="placeText"></el-input> -->
                <div class="selectList" v-if="selectStaffData.length">
                    <el-radio-group v-model="radioStaff">
                        <el-radio :label="index" v-for="(item,index) in selectStaffData" :key="index">{{item.name}}</el-radio>
                    </el-radio-group>
                </div>
                <div v-else>暂无数据~</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_staff = false">取 消</el-button>
                <el-button type="primary" @click="selectStaffOk">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            dialogVisible:false,
            dialogVisible_on:false,
            selectType:'',
            offerList:[],
            checkList:[],//选中值
            total:0,
            page:1,
            pageSize:10,
            staffInput:'', //搜索输入
            selectData:[],

            checkStaff:'',//选择的员工
            checkCustomer:[],//选择员工后选择的客户
            customPage:1, //客户分页
            customerList:[], //客户列表

            // selectStaff_appoint:[],//指定客户弹框列表
            dialogVisible_on2:false,
            checkAppoint:'',

            dialogVisible_staff:false,
            radioStaff:'',
            selectStaffData:[],
            selectStaffInfo:{}
        }
    },
    methods: {

        toSelect(){
            this.dialogVisible = true
        },

        // 查看已分配客户
        viewCustomer(){
            this.$router.push({name:'viewCustomer',query:{}})
        },

        changeTime(row, column, cellValue, index){
            if(cellValue){
                this.$moment(cellValue*1000).format('yyyy-MM-DD')
            }else{
                return ''
            }
        },

        // 移除表格中客户
        delCustom(index,row){
            this.offerList.splice(index,1)
        },


        // 点击选择成员选客户
        selectStaff_cus(){
            this.customerList = []
            this.dialogVisible = false
            this.dialogVisible_on = true
            this.getSelectStaff()
        },
        // 选择员工
        selectStaffFn(){
            this.getCustomerSelect(this.checkStaff)
        },
        // 选择员工后获取客户列表
        getCustomerSelect(qyuserid=''){
            let params = {
                qy_user_id:qyuserid,//不传为全部
                pagesize:10,
                page:this.customPage
            }
            this.$http.post('/api/root/qywx/getCustomerList',params).then(res=>{
                console.log(res,'选择员工后获取客户列表');
                if(res.code==1){
                    this.customerList = res.data.data?res.data.data:[]
                }
            })
        },
        // 选择客户后确定
        selectStaff_cusOk(){
            if(!this.checkCustomer.length){
                this.$message.warning('请选择客户')
                return
            }
            this.offerList = []
            this.checkCustomer.map(item=>{
                this.offerList.push(this.customerList[item])
            })
            this.dialogVisible_on = false
            console.log(this.offerList,'客户列表');
            console.log(this.checkCustomer,'选择的客户111');
        },
        


        // 选择指定客户
        select_custom(){
            this.customerList = []
            this.checkAppoint = {}
            this.dialogVisible = false
            this.dialogVisible_on2 = true
            this.getCustomerSelect()
        },
        // 选择客户后确定
        selectCus_Appoint(){
            this.offerList = []
            console.log(this.checkAppoint,'选择的客户');
            this.checkStaff = this.checkAppoint.staff_qy_user_id
            this.offerList.push(this.checkAppoint)
            this.dialogVisible_on2 = false
        },



        // 选择接替员工按钮
        openSelectStaff(){
            this.dialogVisible_staff = true;
            this.getSelectStaff()
        },
        // 获取接替员工列表
        getSelectStaff(){
            let params = {
                is_qy:1
            }
            this.$http.post('/api/root/qywx/getQyUserList',params).then(res=>{
                console.log(res,'接替员工');
                if(res.code==1){
                    this.selectStaffData = res.data.data?res.data.data:[]
                }
            })
        },
        // 选择接替员工确定
        selectStaffOk(){
            console.log(this.radioStaff,'index');
            if(!this.radioStaff && this.radioStaff!=0){
                this.$message.warning('请选择接替员工')
                return
            }
            this.selectStaffInfo = this.selectStaffData[this.radioStaff]
            this.dialogVisible_staff = false
            console.log(this.selectStaffInfo,'选择的接替员工');
        },
        // 移除已选择接替员工
        delStaff(){
            this.selectStaffInfo = {}
            this.radioStaff = ''
        },
        // 关闭对话框
        closedFn_staff(){
            // this.radioStaff = ''
        },


        selectedRow(selection, row) {
            this.multipleSelection = [];
            const _ths = this;
            selection.map(function (item) {
                _ths.multipleSelection.push(item.id);
            })
        },
        selectedAll(rows) {
            if (rows.length === 0) {
                this.multipleSelection = [];
            } else {
                const _ths = this;
                rows.map(function (item) {
                    if (!_ths.multipleSelection.includes(item.id)) {
                    _ths.multipleSelection.push(item.id);
                    }
                })
            }
        },
        // 分页
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.queryList()
        },
        handleCurrentChange(val) {
            this.page = val;
            this.queryList();
        },

        // 确定转接按钮
        toSubmit(){
            if(!this.offerList.length){
                this.$message.warning('请选择要转接的客户')
                return
            }
            if(!Object.keys(this.selectStaffInfo).length){
                this.$message.warning('请选择接替员工')
                return
            }
            if(this.checkStaff == this.selectStaffInfo.qy_wechat_id){
                this.$message.warning('转接客户不可对自己操作')
                return
            }
            let arr = []
            this.offerList.map(item=>{
                arr.push(item.external_data.external_userid)
            })
            let takeover_userid = this.selectStaffInfo.qy_wechat_id
            let params = {
                handover_userid:this.checkStaff,//原成员的企业userid
                takeover_userid,//接替员工的企业userid
                external_userid:arr, //客户的userid
            }
            console.log(params,'转接数据');
            this.$http.post('/api/root/qywx/transferCustomer',params).then(res=>{
                console.log(res,'转接结果');
                if(res.code==1){
                    this.$message.success('转接成功')
                }else{
                    this.$message.warning(res.msg)
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
@import 'index.less';
</style>

